<template>
  <a-card :bordered="false">
    <a-space>
    <a-row>
      <a-col :span="3">
        <h2 style="color: #1890FF">供应商名称</h2>

      </a-col>
      <a-col :span="4" >
        <a-input-search
          v-model:value="requestResult.supplierName"
          placeholder="请输入查询的供应商名称"
          enter-button
          @search="supplierList"
        />
      </a-col>
      <a-col :span="3">
        <a-button type="primary" style="margin-left: 20px" @click="supplierListReplace">重置</a-button>
      </a-col>

    </a-row>
    </a-space>

    <a-row>
      <a-col :span="6">
        <a-button type="primary" style="margin-left: 10px">新增</a-button>
        <a-button type="primary" style="margin-left: 10px">导入</a-button>
        <a-button type="primary" style="margin-left: 10px">导出</a-button>
      </a-col>

    </a-row>

    <a-row>
      <a-col :span="24">
        <a-alert message="已选择 0 项" type="info" style="margin-top: 10px"/>
      </a-col>

    </a-row>

    <a-row>
      <a-col :span="24">
        <a-table :dataSource="supplierListData" :columns="columns" :pagination="false"/>


        <template>
          <a-pagination :default-current=requestResult.page
                        :total="this.total" style="margin-top: 30px ; margin-left: 1200px"
                        @change="onChange"
          />
        </template>
      </a-col>

    </a-row>

  </a-card>
</template>

<script>
  import {getAction,postAction} from '@/api/manage'


  export default {
    component:{
      getAction,
      postAction
    },
    data () {
      return {
        pagination: {},
        total : undefined,
        supplierListData: [

        ],

        columns: [
          {
            title: '编号',
            dataIndex: 'supplierId',
            key: 'supplierId',
          },
          {
            title: '供应商名称',
            dataIndex: 'supplierName',
            key: 'supplierName',
          },
          {
            title: '联系人',
            dataIndex: 'contacts',
            key: 'contacts',
          },
          {
            title: '联系人电话',
            dataIndex: 'phoneNumber',
            key: 'phoneNumber',
          },
          {
            title: '供应商地址',
            dataIndex: 'address',
            key: 'address',
          },
          {
            title: '备注',
            dataIndex: 'remarks',
            key: 'remarks',
          },
        ],
        requestResult:
            {
                "page": 1,
                "rows": 5,
                "supplierName": ""
            },
        supplierListData:{
          "supplierId": 0,
          "supplierName": "",
          "contacts": "",
          "phoneNumber": "",
          "address": "",
          "remarks": ""
        }
      }
    },
    methods: {
      supplierList () {
        var url = "/supplier/list"
        postAction(url,this.requestResult).then((res) => {
            /*console.log(res);*/
            this.supplierListData = res.rows;
            this.total = res.tatol;
        })
      },
      supplierListReplace () {
        var url = "/supplier/list"
        this.requestResult.supplierName = ""
        this.requestResult.page = 1
        this.requestResult.rows = 5
        postAction(url,this.requestResult).then((res) => {

          this.supplierListData = res.rows;
          this.total = res.tatol;

        })
      },
      onChange(pagination){
        var url = "/supplier/list"
        this.requestResult.supplierName = ""
        this.requestResult.page = pagination
        this.requestResult.rows = 5
        postAction(url,this.requestResult).then((res) => {

          this.supplierListData = res.rows;
          this.total = res.tatol;

        })
          /*console.log(pagination);*/
        }

    },
    created() {
      this.supplierList();
    }
  }
</script>
